{% extends 'base.html' %}
{% load static %}

{% block title %}
    关于我们
{% endblock %}

{% block content %}
    <section class="main-content">
        <div class="container-xl py-5">
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <div class="text-center mb-5">
                        <h1 class="fw-bold">关于我们</h1>
                        <p class="text-muted fs-5">我们是一群热爱生活、追求品质的内容创作者。</p>
                    </div>

                    <!-- 团队介绍 -->
                    <div class="mb-5">
                        <h2 class="h4 fw-bold mb-4">我们的团队</h2>
                        <p>我们来自不同背景，但都怀揣着对美好生活的向往。通过文字与影像，分享生活方式、灵感、时尚与文化，希望为每一个读者带来启发。</p>
                    </div>

                    <!-- 使命愿景 -->
                    <div class="row mb-5">
                        <div class="col-md-6 mb-4">
                            <div class="card border-0 shadow-sm rounded h-100">
                                <div class="card-body p-4">
                                    <h3 class="h5 fw-bold">使命</h3>
                                    <p class="text-muted">通过高质量的内容，激发人们对生活的热爱，提供灵感与实用建议。</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-4">
                            <div class="card border-0 shadow-sm rounded h-100">
                                <div class="card-body p-4">
                                    <h3 class="h5 fw-bold">愿景</h3>
                                    <p class="text-muted">打造一个充满创意与温度的内容平台，让每个人都能找到属于自己的灵感和风格。</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 联系方式 -->
                    <div class="mb-5">
                        <h2 class="h4 fw-bold mb-4">联系我们</h2>
                        <ul class="list-unstyled text-muted">
                            <li class="mb-2"><i class="icon-envelope me-2"></i>邮箱：hello@yourwebsite.com</li>
                            <li class="mb-2"><i class="icon-phone me-2"></i>电话：+86 123 4567 8901</li>
                            <li><i class="icon-map-pin me-2"></i>地址：中国某城市创新科技园A座</li>
                        </ul>
                    </div>

                    <!-- 社交媒体 -->
                    <div class="d-flex justify-content-center gap-3">
                        <a href="#" class="btn btn-outline-dark rounded-circle p-2" style="width: 40px; height: 40px;">
                            <i class="icon-facebook"></i>
                        </a>
                        <a href="#" class="btn btn-outline-dark rounded-circle p-2" style="width: 40px; height: 40px;">
                            <i class="icon-twitter"></i>
                        </a>
                        <a href="#" class="btn btn-outline-dark rounded-circle p-2" style="width: 40px; height: 40px;">
                            <i class="icon-instagram"></i>
                        </a>
                        <a href="#" class="btn btn-outline-dark rounded-circle p-2" style="width: 40px; height: 40px;">
                            <i class="icon-youtube"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}
